<template>
  <div class="infinite-container" id="judge">
    <div class="bgwhite">
      <left-border-title :title="'您对本次服务的评价'"></left-border-title>
      <div class="flex judgeStar" v-for="(value, index) in judgeDetailInfo.scoreList" :key="index">
        <span>{{value.title}}</span>
        <rate :size="20" :score="parseInt(value.score/2)" :readonly="true"></rate>
      </div>
      <div class="labelList">
        <ul class="flex wrap">
          <li v-for="(value, index) in judgeDetailInfo.labelList" :key="index">{{value.title}}</li>
        </ul>
      </div>
      <p class="contentText">{{judgeDetailInfo.content}}</p>
    </div>
  </div>
</template>

<script>
  import leftBorderTitle from '../../components/leftBorderTitle.vue'
  import rate from '../../components/BsRate.vue'
  export default {
    data () {
      return {
        activeIndex: 1,
        judgeDetailInfo: ''
      }
    },
    components: {leftBorderTitle, rate},
    mounted () {
      this.judgeDetailInfo = this.$route.query
      console.log(this.judgeDetailInfo.scoreList)
    },
    methods: {

    }
  }
</script>

<style scoped lang="less">
  @import "../../common/css/flex.css";
  @import "../../common/css/vars";
  .contentText{
    padding: 10px;
    color: #7E7E7E;
  }
  .labelList{
    padding: 10px;
    li{
      background-color: #F2F2F2;
      color: #7E7E7E;
      border-radius: 14px;
      height: 28px;
      line-height: 28px;
      width: 110px;
      text-align: center;
      margin: 5px;
      box-sizing: border-box;
    }
    .activeLi {
      background-color: @color-primary;
      color: white;
    }
  }
  .judgeStar{
    padding: 0 10px 10px 10px;
    span{
      width:90px;
      color: #8F8F8F;
    }
  }
  .longBtnC{
    height: 50px;
    width:100%;
    position: absolute;
    bottom: 0;
  }
</style>
<style lang="less">
  @import "../../common/css/vars";
  .mu-text-field{
    width: 100%;
    border: 1px solid @color-border;
    margin: 10px;
    padding: 5px;
    box-sizing: border-box;
  }
  #judge .mu-raised-button {
    height: 50px;
    line-height: 50px;
  }
</style>
